<template>
	<common-page>
		<view class="page-title margin-top-32 font-28" style="color: #1E2531;font-weight: bold;">安装角度</view>
		<image src="../../static/install_bg.jpg" mode="" style="width: 100%;height: 332rpx;margin-top: 28rpx;"></image>
		<view class="page-content-box">
			<view class="title font-30" style="color: #4B4D5E;font-weight: bold;">安装说明</view>
			<view class="txt font-24" style="color: #9FA2B4;margin-top: 4rpx;">
				进行设备侧装时，请将设备角度调整至20~90°角区间内；
			</view>
		</view>
		<view class="page-title margin-top-60 font-28" style="color: #1E2531;font-weight: bold;">选择安装角度</view>
		<view class="page-slider-box">
			<u-icon name="minus-circle-fill" color="#417CE9" size="22" @click="bindStepReduce"></u-icon>
			<view class="slider">
				<u-slider v-model="sliderValue" :min="minVal" :max="maxVal" inactiveColor="#FFAE43"></u-slider>
			</view>
			<text class="txt">{{ sliderValue }}°</text>
			<view class="margin-left-30">
				<u-icon name="plus-circle-fill" color="#417CE9" size="22" class="" @click="bindStepAdd"></u-icon>
			</view>
		</view>
		<view class="page-btn-wrap">
			<view class="btn-prev">
				<u-button type="primary" plain text="上一步" color="#417CE9" @click="bindGoToBack"></u-button>
			</view>
			<view class="btn-next">
				<u-button type="primary" text="继续" color="#417CE9" class="" @click="bindGoToNext"></u-button>
			</view>
		</view>
	</common-page>
</template>

<script>
export default {
	data() {
		return {
			sliderValue: 30,
			maxVal: 90,
			minVal: 0
		};
	},
	methods: {
		// 减少
		bindStepReduce() {
			if (this.sliderValue > this.minVal) {
				this.sliderValue--;
			}
		},
		// 增加
		bindStepAdd() {
			if (this.maxVal > this.sliderValue) {
				this.sliderValue++;
			}
		},
		// 返回
		bindGoToBack() {
			uni.navigateBack();
		},
		// 下一步
		bindGoToNext() {
			this.$store.commit('addDevice/SET_DEVICE_PARAMAS', {
				key: '',
				value: ''
			});
			uni.navigateTo({
				url: '/pages/device/add4'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.page-content-box {
	padding: 27rpx 22rpx;
	background-color: #fff;
	border-radius: 16rpx;
	margin-top: 28rpx;
}
.page-slider-box {
	display: flex;
	align-items: center;
	width: 100%;
	height: 100rpx;
	margin-top: 16rpx;
	background-color: rgba(78,92,127,0.03);
	border-radius: 12rpx;
	padding: 0 20rpx;
	box-sizing: border-box;
	.slider {
		flex: 1;
	}
	.txt {
		font-size: 24rpx;
		flex-shrink: 0;
	}
}
.page-btn-wrap {
	position: fixed;
	bottom: 80rpx;
	left: 32rpx;
	right: 32rpx;
	display: flex;
}
.btn-prev {
	flex: 1;
	::v-deep .u-button {
		border-radius: 60rpx !important;
		background-color: unset;
	}
	.u-button__text {
		font-size: 32rpx !important;
		font-weight: bold;
	}
}
.btn-next {
	flex: 1;
	margin-left: 60rpx;
	::v-deep .u-button {
		border-radius: 60rpx !important;
		&.u-button--disabled {
			background-color: #D7D7D7 !important;
			border-color: #D7D7D7 !important;
		}
		.u-button__text {
			font-size: 32rpx !important;
			font-weight: bold;
		}
	}
}
</style>
